<template>
  <el-col :span="schema.type && schema.type.includes('array') ? 24 : ui.column" class="form-item">
    <!--对象类型-->
    <form-object
      v-if="schema.type === 'object'"
      :class="ui.class"
      :style="ui.style"
      :form-data="formData"
      :idx-chain="idxChain"
    >
      <h3 v-if="ui.showLabel">{{ label }}</h3>
      <template v-for="(item, key) in (schema.properties || {})">
        <debby-form-item :key="key" :form-data="formData" :idx-chain="idxChain ? (idxChain + '.' + key) : key" :schema="item" />
      </template>
    </form-object>

    <!--数组-->
    <template v-else-if="schema.type && schema.type.includes('array')">
      <component
        :is="layoutArrayComponents[schema.type]"
        :class="ui.class"
        :style="ui.style"
        :form-data="formData"
        :schema="schema"
        :idx-chain="idxChain"
      >
        <template v-for="(fieldSchema, fieldName) in schema.items" :slot="fieldName" slot-scope="props">
          <debby-form-item
            :key="fieldName"
            :schema="fieldSchema"
            :form-data="formData"
            :idx-chain="idxChain + `.${props.idx}.` + fieldName"
          />
        </template>
      </component>
    </template>

    <!--除开对象和数组类型的-->
    <template v-else>
      <el-form-item
        v-if="!hidden"
        :label="label"
        :prop="idxChain"
        :rules="rules"
        :label-width="ui.labelWidth || undefined"
        :class="ui.class"
        :style="ui.style"
      >
        <template>
          <component
            :is="ui.widget"
            v-if="!ui.render"
            :value="utils.get(formData, idxChain)"
            :disabled="disabled"
            :placeholder="ui.placeholder"
            @input="handleInput"
          />
          <ex-slot
            v-else
            :schema="schema"
            :form-data="formData"
            :idx-chain="idxChain"
            :hidden="hidden"
            :rules="rules"
            :ui="ui"
            :value="utils.get(formData, idxChain)"
            :render="ui.render"
            @input="handleInput"
          />
        </template>
      </el-form-item>

    </template>
  </el-col>
</template>

<script>
import formObject from './layout/object'
import formArray from './layout/array'
import formArrayTable from './layout/array-table'
import formArrayCard from './layout/array-card'
import formArrayTabs from './layout/array-tabs'

import exSlot from './components/ex-slot'

import utils from './lib/utils'
import formMixin from './mixins/mixin'
import eventBus from './lib/event-bus'

export default {
  name: 'DebbyFormItem',
  components: { formObject, formArray, exSlot },
  mixins: [formMixin],
  props: {
    schema: {
      type: Object,
      default: () => {}
    },
    formData: {
      type: Object,
      default: () => {}
    },
    idxChain: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      utils,
      layoutArrayComponents: {
        array: formArray,
        'array-table': formArrayTable,
        'array-card': formArrayCard,
        'array-tabs': formArrayTabs
      }
    }
  },
  methods: {
    handleInput(val) {
      utils.set(this.formData, this.idxChain, val)

      /**
       * emit field-change, example: $emit('on-field-change', idxChain, val).  idxChain is formData's path
       * you cloud set formData by utils.set(idxChain, your own val, now schema)
       */
      eventBus.$emit('onFieldChange', this.idxChain, val, this.schema)
    }
  }
}
</script>

<style scoped>
.form-item::after {
  /*clear: both;*/
}
>>> .el-form-item {
  width: 100% !important;
}
</style>
